.item {
  border-radius: 10px;
  overflow: hidden;
  &.type1 {
    .mask {
      background: url('./bg1.png') repeat-x center bottom / 100%;
      &:hover {
        background-image: url('./bg1_hover.png');
      }
    }
  }
  &.type2 {
    .mask {
      background: url('./bg2.png') repeat-x center bottom / 100%;
      &:hover {
        background-image: url('./bg2_hover.png');
      }
    }
  }
  .ratio {
    position: relative;
    padding-top: 100%;

    .content {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: #FFF;

      .person {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
      }

      .mask {
        display: flex;
        padding: 12px;
        flex-direction: column;
        justify-content: flex-end;
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 100%;

        .en {
          font-size: 12px;
          color: #fff;
          line-height: 17px;
          margin-bottom: 2px;
          opacity: .5;
        }

        .cn {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 16px;
          color: #fff;
          line-height: 22px;

          .go {
            width: 23px;
            height: 23px;
            background: url('./icon-go.png') no-repeat center / 100%;
          }
        }

      }
    }
  }
}